<template>
  <div class="dashboard-container">
    <!-- 欢迎信息 -->
    <div class="welcome">
      <p class="welcome-text">欢迎来到演唱会后台管理系统</p>
    </div>

    <!-- 统计信息行 -->
    <el-row :gutter="20" class="stats-row">
      <!-- 增长人数统计 -->
      <el-col :span="6">
        <el-statistic
          title="增长人数"
          :value="mockData.growth"
          group-separator=","
          :precision="2"
        ></el-statistic>
      </el-col>
      <!-- 男女比例统计 -->
      <el-col :span="6">
        <el-statistic title="男女比">
          <template slot="formatter">
            {{ formatGenderRatio() }}
          </template>
        </el-statistic>
      </el-col>
      <!-- 特殊标记的统计 -->
      <el-col :span="6">
        <el-statistic
          title="特殊标记"
          :value="mockData.special"
          group-separator=","
          :precision="2"
          decimal-separator="."
        >
          <template slot="prefix">
            <i class="el-icon-s-flag" style="color: red"></i>
          </template>
          <template slot="suffix">
            <i class="el-icon-s-flag" style="color: blue"></i>
          </template>
        </el-statistic>
      </el-col>
      <!-- 点赞反馈统计 -->
      <el-col :span="6">
        <el-statistic
          title="点赞反馈"
          :value="likeToggleValue"
        >
          <template slot="suffix">
            <span class="like" @click="toggleLike">
              <i
                class="el-icon-star-on"
                v-show="like"
                style="color:red"
              ></i>
              <i class="el-icon-star-off" v-show="!like"></i>
            </span>
          </template>
        </el-statistic>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 导出Vue组件的默认对象
export default {
  name: "Dashboard", // 组件名称为Dashboard
  data() {
    return {
      // 返回组件的数据对象
      like: true, // 定义一个变量like，初始值为true
      mockData: this.generateMockData(), // 调用generateMockData方法，并赋值给mockData变量
    };
  },
  methods: {
    // 定义组件的方法对象
    formatGenderRatio() {
      // 定义一个方法，返回性别比例的格式化字符串
      return `${this.mockData.male}/${this.mockData.female}`; // 使用模板字符串格式化输出男性和女性人数
    },
    toggleLike() {
      // 定义一个方法，切换like变量的值
      this.like = !this.like; // 将like变量取反
    },
    generateMockData() {
      // 定义一个方法，用于生成模拟数据
      const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; // 定义一个生成随机整数的函数
      return {
        // 返回一个对象，包含随机生成的数据
        growth: randomInt(1000, 5000), // 生成随机增长人数
        male: randomInt(100, 1000), // 生成随机男性人数
        female: randomInt(1, 100), // 生成随机女性人数
        special: parseFloat((Math.random() * 10000).toFixed(2)) // 生成随机特殊标记数值，并保留两位小数
      };
    }
  },
  computed: {
    // 定义计算属性对象
    likeToggleValue() {
      return this.like ? 521 : 520; // 根据like变量的值，返回点赞数值
    }
  }
};
</script>

<style scoped>
.dashboard-container {
  text-align: center;
}

.welcome {
  margin-bottom: 20px;
}

.welcome-text {
  font-family: 'magicFont', sans-serif; 
  font-size: 50px;
  margin: 0;
}

.stats-row {
  margin-top: 20px;
}

.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
</style>